<!--
 * @Author: your name
 * @Date: 2020-11-10 16:24:35
 * @LastEditTime: 2020-11-11 13:27:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tree\src\views\home\my\myData.vue
-->
<template>
    <div class="mydata">
        <div class="mydataHeader">
            <i @click="toBack">&lt;</i>个人资料
        </div>
        <div class="mydataMain">
            <p>
                <label for="">头像</label>
                <span>
                    <img src="../assets/1..gif" alt="">
                    <i class="iconfont icon-xiayiye"></i></span></p>
            <p>
                <label for="">昵称</label>
                <span>
                    <input type="text" name="" id="" value="建军">
                    <i class="iconfont icon-xiayiye"></i></span></p>
            <p>
                <label for="">手机号</label>
                <span>
                    <span>17678090149</span>
                    <i class="iconfont icon-xiayiye"></i></span></p>
            <p>
                <label for="">生日</label>
                <span>
                    <span>2020-11-15</span>
                    <i class="iconfont icon-xiayiye"></i></span></p>
            <p>
                <label for="">退出登录</label>
                <span>
                    <i class="iconfont icon-xiayiye"></i></span></p>
            <p>
                <label for="">隐私政策</label>
                <span>
                    <i class="iconfont icon-xiayiye"></i></span></p>
            <p>
                <label for="">用户协议</label>
                <span>
                    <i class="iconfont icon-xiayiye"></i></span></p>
            <p>
                <input type="button" value="保存"></p>
        </div>
    </div>
</template>

<script>
import {defineComponent} from "vue"
import {useRouter} from "vue-router"
    export default defineComponent({
        setup(){
            let router = useRouter()
            let toBack = ()=>{
                router.go(-1)
            }

            return {
                toBack
            }
        }
        
    });
</script>

<style lang="scss" scoped>
@import url("../fonts/iconfont.css");
    .mydata{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        font-size: 14px;
    }
    .mydataHeader{
        display: flex;
        height: 50px;
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 16px;
        font-weight: bold;
        i{
            position: absolute;
            left:10px;
        }
    }
    .mydataMain{
        flex:1;
        p{
            margin:0 15px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
        }
        p:nth-child(1){
            >span{
                display: flex;
                align-items: center;
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
            }
        }   
        p:nth-child(2){
            >span{
                display: flex;
                align-items: center;
                input{
                    border:none;
                    outline: none;
                    text-align: right;
                }
            }
        }  
        p:last-child{
            border:none;
            input{
                width: 100%;
                border:1px solid #ccc;
                border-radius: 15px;
                line-height: 30px;
            }
        }
    }
    
</style>